<template>
    <div class="topBox f ">
        <div>
            <div v-if="true" class="leftBox">
                <!-- <div @click="CreateTopic" class="CreateaTopic">创建话题</div> -->
                <!-- 下面的话题 -->
                <div class="topicList">
                    <div v-for="(item, index) in list" :key="index" @click="youTabs(item, index)"
                        :class="{ active: num == index + 1 }" class="itemObj f f-a-c f-j-b">
                        <div class="f">
                            <img src="/src/status/img/5.png" v-if="num == index + 1" class="jinghaoImg" alt="">
                            <img src="/src/status/img/6.png" v-else class="jinghaoImg" alt="">
                            {{ item.name }}

                        </div>
                        <img src="/src/status/det.png" @click.stop="detlist(item)" v-if="num == index + 1" class="detels"
                            alt="">
                    </div>
                    <div v-if="!list" style="text-align:center;font-size:14px;color:#666;font-weight:600;">暂无采集</div>
                </div>
            </div>
        </div>
        <div class="center">
            <!-- 中间的 -->
            <div v-if="false" class="centerBox">
                <div class="CreateTopic">创建话题</div>
                <div class="inpBox">
                    <!-- 对号 -->
                    <div class="Check f f-a-c f-j-c" :class="{ act: ind == 2 }">
                        <img src="/src/status/dui.png" class="duihao" alt="">
                    </div>
                    <input type="text" v-model="value" @change="changeFn" class="inp" placeholder="请输入话题标题" name="" id="">
                </div>
                <div class="topics">你可以试试下面的话题</div>
                <!-- 下面的话题 -->
                <div class="list f f-a-c f-w-w">
                    <div @click="SolarTerms('二十四节气')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        二十四节气
                    </div>
                    <div @click="SolarTerms('二十四节气')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        二十四节气
                    </div>
                    <div @click="SolarTerms('二十四节气')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        二十四节气
                    </div>
                    <div @click="SolarTerms('二十四节气')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        二十四节气
                    </div>
                </div>
            </div>
            <div v-if="listCaiji.length != 0">
                <!-- 中间的列表 -->
                <div v-if="listTicpo" class="listCount">
                    <van-list offset="10" @load="onLoad">
                        <div v-for="(item, index) in listCaiji" :key="index" class="itemCount">

                            <div class="topName">{{ item.en_title }}</div>
                            <!-- 时间 -->
                            <div class="topTime">{{ item.article_time }}</div>
                            <!-- 内容 -->
                            <!-- <div class="count"></div> -->
                            <!-- 下面的查看详情 -->
                            <div class="ViewDetails f f-a-c f-j-b">
                                <div @click="itemList(item)" class="chakanDetil">查看详情</div>
                                <div @click="detilsDel(item)" class="tuPian f f-a-c">
                                    <img src="/src/status/img/3.png" v-if="true" class="caiji" alt="">
                                    <!-- <img src="/src/status/img/yicaiji.png" v-else class="caiji" alt=""> -->
                                    <div @click="detildDel(item)" class="Ingredients">删除</div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </div>
            </div>
            <!-- 这个是列表没有数据时候 -->
            <div v-if="listCaiji.length == 0" class="listCounts">
                <img src="/src/status/zanwu.png" class="zanwu" alt="">
                <div class="zanwuName">暂无采集数据</div>
                <!-- <div class="count">请在下方或右侧输入对应关键字搜索</div> -->
            </div>
        </div>
        <div>
        </div>
    </div>
    <!-- 下面的搜索 -->
    <div v-if="false" class="botSchet">
        <div class="suosuImg f f-a-c f-j-c"><img src="/src/status/img/4.png" class="schImg" alt=""></div>
        <input type="text" v-model="shectValue" placeholder="请输入关键词搜索" class="inpShou" name="" id="">
    </div>
    <CountDetile ref="Detil" @zuoFerter="zuoFerter" @youFerter="youFerter" :item="item" />
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import CountDetile from './CountDetile/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { CyTopics, TopicsList, ArticleListCai, ArticleInfo, DeleteArticle } from '../../api/index.js'
let value = ref('')
let ind = ref(1)
let gaiValue = ref('')//概念
let leiValue = ref('')//类别
let addValue = ref('')//地点
let value4 = ref('')//时间
let time = ref('')
let num = ref(1)//话题选择
let Detil = ref(null)//设置ref
let list = ref([])//话题选择
let listCaiji = ref([])//话题选择
const item = ref({})
let addTicpo = ref(false)//控制创建话题显示与否
let listTicpo = ref(true)//控制列表显示
let zanwuTicpo = ref(false)//控制暂无列表显示
let shectValue = ref('')//搜索的内容
let objItem = ref({})//搜索的内容
let timeTs = ref(null)//搜索的内容
let page = ref(1)//搜索的内容
onMounted(() => {
    CyTopicsl()
})
//子组件中的点击左上一篇文章
const zuoFerter = async (id) => {
    let n = await ArticleInfo({
        article_id: id,
        topics_id: objItem.value.id
    })
    item.value = { ...n.content.info, next_article_id: n.content.next_article_id, pre_article_id: n.content.pre_article_id }
}
//子组件中的点击右上一篇文章
const youFerter = async (id) => {
    let n = await ArticleInfo({
        article_id: id,
        topics_id: objItem.value.id
    })
    item.value = { ...n.content.info, next_article_id: n.content.next_article_id, pre_article_id: n.content.pre_article_id }
}
// /点击删除
const detildDel = (item) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: '提示',
        }
    )
        .then(async () => {
            let n = await DeleteArticle({
                article_id: item.id
            })
            if (n.code == 200) {
                ElMessage.success(n.msg)
                listCaiji.value = []
                page.value = 1
                listCi()
            } else {
                ElMessage.error(n.msg)
            }
        })
        .catch(() => {
            // ElMessage({
            //     type: 'info',
            //     message: 'Delete canceled',
            // })
        })




}
// 划到下方
const onLoad = () => {
    clearTimeout(timeTs.value)
    timeTs.value = setTimeout(() => {
        page.value++
        listCi()
    }, 300)
}
// 列表
const listCi = async () => {
    let n = await ArticleListCai({
        page: page.value,
        pageSize: 10,
        topics_id: objItem.value.id
    })
    listCaiji.value = [...listCaiji.value, ...n.content.list]
}
// 这个是我的采集话题
const CyTopicsl = async () => {
    let n = await CyTopics()
    list.value = n.content.topics_list
    objItem.value = list.value[0]
    listCi()
}
// 点击创建话题-------------------------------------------------------------------------
// const CreateTopic = () => {
//     addTicpo.value = true
//     listTicpo.value = false
//     zanwuTicpo.value = false
// }
// 当input改变的时候
watch(value, (newName, oldName) => {
    if (value.value.length == 0) {
        ind.value = 1
    } else {
        ind.value = 2
    }
});
// 请求详情
const detilsProp = async (id) => {
    let n = await ArticleInfo({
        article_id: id,
        topics_id: objItem.value.id
    })
    item.value = { ...n.content.info, next_article_id: n.content.next_article_id, pre_article_id: n.content.pre_article_id }
}
//点击查看详情列表弹出弹出层
const itemList = (items) => {
    // item.value = items
    detilsProp(items.id)
    Detil.value.visibles = true
}
// 这个点击后tabs
const youTabs = (item, index) => {
    num.value = index + 1
    objItem.value = item
    page.value = 1
    listCaiji.value = []
    listCi()
}

// 这个是选择日期后
const changeFn = (e) => {
    // console.log(new Date(+new Date(e[0])), '0.0.0.00.');
    let yaer1 = e[0].getFullYear()
    // let Moth1 = e[0].getFullYear()
    let Moth1 = (e[0].getMonth() + 1 < 10 ? '0' + (e[0].getMonth() + 1) : e[0].getMonth() + 1)
    let Day1 = (e[0].getDate() < 10 ? '0' + e[0].getDate() : e[0].getDate());
    let yaer2 = e[1].getFullYear()
    // let Moth1 = e[0].getFullYear()
    let Moth2 = (e[1].getMonth() + 1 < 10 ? '0' + (e[1].getMonth() + 1) : e[1].getMonth() + 1)
    let Day2 = (e[1].getDate() < 10 ? '0' + e[1].getDate() : e[1].getDate());
    console.log(yaer1, Moth1, Day1);
    console.log(yaer2, Moth2, Day2);
    time.value = `${yaer1}/${Moth1}/${Day1}-${yaer2}/${Moth2}/${Day2}`
    // console.log(`${yaer1}/${Moth1}/${Day1}-${yaer2}/${Moth2}/${Day2}`, '0.0.00.0.00.');
}
// /点击删除
const detlist = (item) => {
    ElMessageBox.confirm(
        '如果删除，对应的话题其他文章也会删除，确认要删除吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: '提示',
        }
    )
        .then(async () => {
            let n = await TopicsList({
                topics_id: item.id
            })
            if (n.code == 200) {
                ElMessage.success(n.msg)
                list.value = []
                num.value = 1
                page.value = 1
                listCaiji.value = []
                CyTopicsl()
            } else {
                ElMessage.error(n.msg)
            }

        })
        .catch(() => {
            // ElMessage({
            //     type: 'info',
            //     message: 'Delete canceled',
            // })
        })
}
// 下面点击后放进input框
const SolarTerms = (str) => {
    value.value = str
}
</script>
<style scoped>
@import './index.scss';
</style>